<template>
	<!-- app商品详情 -->
	<view>
		<view class="index">
			<swiper class="index-swiper" indicat or-dots circular autoplay>
				<swiper-item v-for="(item,index) in goodsDeatil" :key="index">
					<image class="swiper-img" :src="item.cat_icon"></image>
					<!-- <text>{{item.goods_id}}</text> -->
				</swiper-item>
			</swiper>
		</view>
		<!-- 文字介绍及价格 -->
		<view class="goods-deatil" v-for="(item,index) in goodsDeatil" :key="index">
			<view class="price">
				<text>￥{{item.cat_id}}</text>
			</view>
			<view class="discountPrice">
				<text class="discountPrice-text">￥{{item.cat_level}}</text>
			</view>
			<view class="name">
				{{item.cat_name}}
			</view>
		</view>
		<view class="serveText">
			<svg t="1666939405728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2146" width="14" height="14">
				<path
					d="M511.956496 0C229.2053 0 0 229.2053 0 511.966732c0 282.751196 229.2053 512.033268 511.956496 512.033268 282.833086 0 512.038386-229.282072 512.038386-512.033268C1023.994882 229.2053 794.789582 0 511.956496 0z m0 967.132437c-250.926652 0-455.094051-204.167399-455.094051-455.170823 0-250.926652 204.167399-455.094051 455.094051-455.094051 251.003424 0 455.165705 204.167399 455.165704 455.094051 0.005118 251.003424-204.162281 455.170823-455.165704 455.170823z"
					p-id="2147" fill="#8a8a8a"></path>
				<path
					d="M739.580293 341.282152h-28.507994v28.513113h-28.431223v28.431222h-28.441459v28.436341h-28.431222v28.431223h-28.431223v28.43634h-28.436341v28.436341h-28.431222v28.426105h-28.513113v28.513112h-28.431223v28.431223h-28.431222v28.441459h-28.436341v-28.441459h-28.431223v-28.431223h-28.43634v-28.513112h-28.431223v-28.426105h-28.513113v-28.436341H227.547025v56.862446h28.431223v28.513112h28.436341v28.431223h28.431222v28.441459h28.513113v28.431222h28.431223v28.431223h28.43634v28.436341h85.298786v-28.436341h28.431223v-28.431223h28.513113v-28.431222h28.431222v-28.441459h28.436341v-28.431223h28.431223v-28.513112h28.431222v-28.426105h28.441459v-28.436341h28.431223v-28.43634h28.507994v-28.431223h28.436341v-28.436341h28.431223v-85.370439h-56.867564z"
					p-id="2148" fill="#8a8a8a"></path>
			</svg>
			<text style="margin-top: -6rpx;">七天无理由</text>
			<svg t="1666939405728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2146" width="14" height="14">
				<path
					d="M511.956496 0C229.2053 0 0 229.2053 0 511.966732c0 282.751196 229.2053 512.033268 511.956496 512.033268 282.833086 0 512.038386-229.282072 512.038386-512.033268C1023.994882 229.2053 794.789582 0 511.956496 0z m0 967.132437c-250.926652 0-455.094051-204.167399-455.094051-455.170823 0-250.926652 204.167399-455.094051 455.094051-455.094051 251.003424 0 455.165705 204.167399 455.165704 455.094051 0.005118 251.003424-204.162281 455.170823-455.165704 455.170823z"
					p-id="2147" fill="#8a8a8a"></path>
				<path
					d="M739.580293 341.282152h-28.507994v28.513113h-28.431223v28.431222h-28.441459v28.436341h-28.431222v28.431223h-28.431223v28.43634h-28.436341v28.436341h-28.431222v28.426105h-28.513113v28.513112h-28.431223v28.431223h-28.431222v28.441459h-28.436341v-28.441459h-28.431223v-28.431223h-28.43634v-28.513112h-28.431223v-28.426105h-28.513113v-28.436341H227.547025v56.862446h28.431223v28.513112h28.436341v28.431223h28.431222v28.441459h28.513113v28.431222h28.431223v28.431223h28.43634v28.436341h85.298786v-28.436341h28.431223v-28.431223h28.513113v-28.431222h28.431222v-28.441459h28.436341v-28.431223h28.431223v-28.513112h28.431222v-28.426105h28.441459v-28.436341h28.431223v-28.43634h28.507994v-28.431223h28.436341v-28.436341h28.431223v-85.370439h-56.867564z"
					p-id="2148" fill="#8a8a8a"></path>
			</svg>
			<text style="margin-top: -6rpx;">️48小时内发货</text>
		</view>
		<view class="deliveryText">
			<text>快递</text>
			<text>️¥10</text>
		</view>
		<!-- 分割线 -->
		<view class="divider"/>
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick"></uni-goods-nav>
		</view>
	</view>

</template>

<script>
	import uniGoodsNav from '../../components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				options: [{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						text: '客服'
					},
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
						text: '店铺'
					}, {
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
						text: '购物车',
						info: 12
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				goodsId: 0,
				goodsDeatil: []

			}
		},
		methods: {
			async getGoodsDeatil() {
				const res = await this.$myRequest({
					url: '/api/public/v1/categories'
				})
				// console.log(1112222, res)
				// this.topBar = res.data.message
				// this.recommendList = res.data.message
				// this.recommendListDetial = this.recommendList[0]
				// console.log(1112222)
				this.goodsDeatil = res.data.message.goods.filter(i => i.goods_id == this.goodsId)
				// console.log(1112222, this.goodsDeatil)
			},
			onClick(e) {
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				console.log(e)
			},
			buttonClick(e) {
				console.log(e)
				// this.options[2].info++
			}
		},
		onLoad(query) {
			console.log("接收到的参数为：", query)
			this.goodsId = query.id
			console.log("goodsId的值为：", this.goodsId)
			this.getGoodsDeatil()

		},
		components: {
			uniGoodsNav
		}
	}
</script>

<style scoped>
	.divider{
		 background: #E0E3DA;
		 width: 100%;
		 height: 3rpx;
		}
	.deliveryText {
		margin: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		color: #8a8a8a;
		font-size: 28rpx;
	}

	.serveText {
		display: flex;
		justify-content: center;
		color: #8a8a8a;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.price {
		text-align: center;
		color: #b50e03;
		font-size: 36rpx;
		margin: 20rpx 0 5rpx 0;
	}

	.discountPrice-text {
		text-decoration: line-through;
	}

	.discountPrice {
		text-align: center;
		color: #ccc;
		font-size: 28rpx;
	}

	.name {
		margin: 0 80rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		/* white-space: nowrap; */
		font-size: 36rpx;
		line-height: 50rpx;
		padding-bottom: 15rpx;
		padding-top: 10rpx;
	}

	.goods_nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.index-swiper {
		width: 750rpx;
		height: 680rpx;
	}

	.swiper-img {
		height: 100%;
		width: 100%;
	}
</style>
